<template>
    <van-form v-if="formData" ref="blogForm">
      <van-field
        v-for="item in formData"
        :key="item['query']"
        v-model="form[item['query']]"
        :name="item['inputName']"
        :label="item['lable']"
        :placeholder="item['placeholder']"
        :rules="rulesData[item['query']] | padRule"
        :type="item['inputType']"
        :readonly="item['readonly']"
      />
      <slot></slot>
    </van-form>
</template>

<script>
import RULES_DATA from "@/config/rule.config";
import FORM_DATA from "@/config/form.config";
import {padStart, capitalize} from 'lodash'
export default {
  name: 'VueEleMBaseForm',
  props: {
    type: {
      type: String
    }
  },
  data() {
    return {
      form: {}
    };
  },
  destroyed() {
    this.form =  {}
  },
  computed: {
    formData() {
      return FORM_DATA[this.type]?.filter(item => item.query !== 'avatar') || false;
    },
    rulesData() {
      return RULES_DATA;
    },
    
  },
  filters: {
    // filters是响应式
    padRule(rules) {
      // filter中的this不指向vue实例
      rules?.forEach(item => {
        if (item.trigger === 'onBlur') {
          return false;
        }
        item.trigger = padStart(capitalize(item.trigger), 6, 'on')
      })
      return rules
    }
  },
  mounted() {
    // Object.entries(this.rulesData).forEach(([key, items]) => {
    //   items.forEach(item => {
    //     if (item.trigger === 'onBlur') {
    //       return false;
    //     }
    //     item.trigger = padStart(capitalize(item.trigger), 6, 'on')
    //   })
    // })
  },
  methods: {
    // TODO, 为何methods是响应式
    // padRule(rules) {
    //   // filter中的this不指向vue实例
    //   rules.forEach(item => item.trigger = padStart(capitalize(item.trigger), 6, 'on'))
    //   return rules
    // }
  },


};
</script>
